<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 待审批标签页 -->
      <el-tab-pane label="待审批" name="pending">
        <el-table :data="pendingList" v-loading="loading">
          <el-table-column label="申请人" prop="borrower" />
          <el-table-column label="装备名称" prop="equipmentName" />
          <el-table-column label="借用数量" prop="number" />
          <el-table-column label="借用日期" prop="borrowDate" />
          <el-table-column label="归还日期" prop="returnDate" />
          <el-table-column label="申请时间" prop="applyTime" />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="warning">待审批</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="handleApprove(scope.row)">同意</el-button>
              <el-button type="danger" size="mini" @click="handleReject(scope.row)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 审批记录标签页 -->
      <el-tab-pane label="审批记录" name="history">
        <el-table :data="historyList" v-loading="loading">
          <el-table-column label="申请人" prop="borrower" />
          <el-table-column label="装备名称" prop="equipmentName" />
          <el-table-column label="借用数量" prop="number" />
          <el-table-column label="借用日期" prop="borrowDate" />
          <el-table-column label="归还日期" prop="returnDate" />
          <el-table-column label="审批时间" prop="approvalTime" />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 'approved' ? 'success' : 'danger'">
                {{ scope.row.status === 'approved' ? '已通过' : '已拒绝' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审批意见" prop="comment" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'EquipmentApproval',
  data() {
    return {
      activeTab: 'pending',
      loading: false,
      pendingList: [
        {
          borrower: '张三',
          equipmentName: '礼服',
          number: 1,
          borrowDate: '2024-03-20',
          returnDate: '2024-03-25',
          applyTime: '2024-03-19 14:30:00'
        }
      ],
      historyList: [
        {
          borrower: '李四',
          equipmentName: '礼宾枪',
          number: 2,
          borrowDate: '2024-03-15',
          returnDate: '2024-03-18',
          approvalTime: '2024-03-14 16:00:00',
          status: 'approved',
          comment: '同意借用'
        }
      ]
    }
  },
  methods: {
    handleApprove(row) {
      this.$modal.confirm('确认同意该借用申请？').then(() => {
        // TODO: 调用审批接口
        this.$message.success('审批通过')
      })
    },
    handleReject(row) {
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea'
      }).then(({ value }) => {
        // TODO: 调用拒绝接口
        this.$message.success('已拒绝申请')
      })
    }
  }
}
</script>
